<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>用户管理</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        h1 {
            text-align: center;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* 头部导航 */
        .admin-header {
            background-color: #2c3e50;
            color: white;
            padding: 15px 0;
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .admin-header h1 {
            margin: 0;
            font-size: 24px;
            font-weight: 600;
        }

        /* 卡片样式 */
        .admin-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.08);
            margin-bottom: 30px;
            overflow: hidden;
        }

        .card-header {
            padding: 15px 20px;
            font-size: 18px;
            font-weight: 600;
        }

        .card-header.add {
            background-color: #4CAF50;
            color: white;
        }

        .card-header.list {
            background-color: #2196F3;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-body {
            padding: 20px;
        }

        /* 表单样式 */
        .form-row {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 20px;
        }

        .form-group {
            flex: 1;
            min-width: 200px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
            color: #555;
        }

        .form-control {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .form-control:focus {
            border-color: #4CAF50;
            outline: none;
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .btn-add {
            background-color: #4CAF50;
            color: white;
        }

        .btn-add:hover {
            background-color: #45a049;
        }

        /* 表格样式 */
        .table-container {
            overflow-x: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        th {
            background-color: #f8f9fa;
            font-weight: 600;
            color: #333;
        }

        tr:hover {
            background-color: #f1f8fe;
        }

        .btn-edit {
            background-color: #2196F3;
            color: white;
            margin-right: 5px;
        }

        .btn-edit:hover {
            background-color: #0b7dda;
        }

        .btn-delete {
            background-color: #f44336;
            color: white;
        }

        .btn-delete:hover {
            background-color: #d32f2f;
        }

        /* 空数据提示 */
        .empty-tip {
            padding: 20px;
            text-align: center;
            color: #999;
            font-style: italic;
        }
    </style>
</head>
<body>
<jsp:include page="headers.jsp" />
<h1>用户管理</h1>

<!-- 添加用户表单 -->
<div class="admin-card">
    <div class="card-header add">添加用户</div>
    <div class="card-body">
        <form action="${pageContext.request.contextPath}/admin/userManagementServlet" method="post" class="add-user-form">
            <input type="hidden" name="action" value="add">
            <div class="form-row">
                <div class="form-group">
                    <label for="username">用户名:</label>
                    <input type="text" id="username" name="username" placeholder="用户名" required class="form-control">
                </div>
                <div class="form-group">
                    <label for="phone">电话:</label>
                    <input type="text" id="phone" name="phone" placeholder="电话" required class="form-control">
                </div>
                <div class="form-group">
                    <label for="address">地址:</label>
                    <input type="text" id="address" name="address" placeholder="地址" required class="form-control">
                </div>
                <div class="form-group">
                    <label for="email">邮箱:</label>
                    <input type="email" id="email" name="email" placeholder="邮箱" required class="form-control">
                </div>
                <div class="form-group">
                    <label for="password">密码:</label>
                    <input type="text" id="password" name="password" placeholder="密码" required class="form-control">
                </div>
            </div>
            <input type="submit" value="添加" class="btn btn-add">
        </form>
    </div>
</div>

<!-- 显示用户列表 -->
<div class="admin-card">
    <div class="card-header list">
        <span>用户列表</span>
    </div>
    <div class="card-body table-container">
        <table>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>电话</th>
                <th>地址</th>
                <th>邮箱</th>
                <th>密码</th>
                <th>操作</th>
            </tr>
            <%
                java.util.List<java.util.Map<String, Object>> users = (java.util.List<java.util.Map<String, Object>>) request.getAttribute("users");
                if (users != null && !users.isEmpty()) {
            %>
            <% for (java.util.Map<String, Object> user : users) { %>
            <tr>
                <td><%= user.get("id") %></td>
                <td><%= user.get("username") %></td>
                <td><%= user.get("phone") %></td>
                <td><%= user.get("address") %></td>
                <td><%= user.get("email") %></td>
                <td><%= user.get("password") %></td>
                <td>
                    <!-- 编辑按钮 -->
                    <button type="button" class="btn btn-edit"
                            onclick="openEditModal(
                                    '<%= user.get("id") %>',
                                    '<%= user.get("username") %>',
                                    '<%= user.get("phone") %>',
                                    '<%= user.get("address") %>',
                                    '<%= user.get("email") %>',
                                    '<%= user.get("passwprd") %>'
                                    )">
                        编辑
                    </button>

                    <!-- 删除按钮 -->
                    <button type="button" class="btn btn-delete"
                            onclick="document.getElementById('deleteForm_<%= user.get("id") %>').submit()">
                        删除
                    </button>

                    <!-- 简化的删除表单 -->
                    <form id="deleteForm_<%= user.get("id") %>" action="${pageContext.request.contextPath}/admin/userManagementServlet" method="post" style="display:none;">
                        <input type="hidden" name="action" value="delete">
                        <input type="hidden" name="id" value="<%= user.get("id") %>">
                    </form>
                </td>
            </tr>
            <% } %>
            <% } else { %>
            <tr>
                <td colspan="6" class="empty-tip">暂无用户数据</td>
            </tr>
            <% } %>
        </table>
    </div>
</div>

<!-- 编辑用户的模态框 -->
<div id="editModal" class="modal" style="display:none; position:fixed; z-index:1; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.4);">
    <div class="modal-content" style="background-color:#fefefe; margin:15% auto; padding:20px; border:1px solid #888; width:80%; max-width:600px; border-radius:8px;">
        <div class="modal-header" style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;">
            <h2>编辑用户</h2>
            <button type="button" class="close" onclick="closeEditModal()" style="font-size:28px; font-weight:bold;">&times;</button>
        </div>
        <div class="modal-body">
            <form id="editUserForm" action="${pageContext.request.contextPath}/admin/userManagementServlet" method="post">
                <input type="hidden" name="action" value="update">
                <input type="hidden" id="editUserId" name="id">

                <div class="form-row">
                    <div class="form-group">
                        <label for="editUsername">用户名:</label>
                        <input type="text" id="editUsername" name="username" required class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="editPhone">电话:</label>
                        <input type="text" id="editPhone" name="phone" required class="form-control">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="editAddress">地址:</label>
                        <input type="text" id="editAddress" name="address" required class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="editEmail">邮箱:</label>
                        <input type="email" id="editEmail" name="email" required class="form-control">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="editPassword">密码:</label>
                        <input type="password" id="editPassword" name="password" class="form-control">
                        <small class="text-muted">不修改密码请留空</small>
                    </div>
                </div>

                <div class="form-row" style="justify-content:flex-end; margin-top:20px;">
                    <button type="button" onclick="closeEditModal()" class="btn" style="background-color:#ddd; margin-right:10px;">取消</button>
                    <button type="submit" class="btn btn-edit">保存修改</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    // 编辑模态框相关函数
    function openEditModal(id, username, phone, address, email,password) {
        document.getElementById('editUserId').value = id;
        document.getElementById('editUsername').value = username;
        document.getElementById('editPhone').value = phone;
        document.getElementById('editAddress').value = address;
        document.getElementById('editEmail').value = email;
        document.getElementById('editPassword').value = password;
        document.getElementById('editModal').style.display = 'block';
    }

    function closeEditModal() {
        document.getElementById('editModal').style.display = 'none';
    }

    // 点击模态框外部关闭
    window.onclick = function(event) {
        if (event.target == document.getElementById('editModal')) {
            closeEditModal();
        }
    }
</script>
</div>
</div>
</body>
</html>